<template>
  <div class="recommend-page">
    <!-- 顶部大卡片 -->
    <van-card
        :thumb="user?.avatarUrl"
        class="top-card"
    >
      <template #title>
        <h2 class="card-title">我的好友</h2>
      </template>
      <template #desc style="margin: 8px 0">
        <h3>来查看你关注了谁吧</h3>
      </template>

      <template #footer>
        <div class="stats-container">
          <div class="stat-item">
            <div class="stat-number">{{ followUserList?.userCount }}</div>
            <div class="stat-label">关注</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">{{ followUserList?.followedUserCount }}</div>
            <div class="stat-label">粉丝</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">{{ followUserList?.mutualUserCount }}</div>
            <div class="stat-label">互相关注</div>
          </div>
        </div>
      </template>
    </van-card>

    <!-- 列表项 -->
    <van-tabs v-model:active="active" animated @change="doTagsChange" style="margin-top: 6px">
      <van-tab name="follow">
        <template #title>
          <van-icon name="closed-eye" style="margin-right: 2px"/>
          关注
        </template>
      </van-tab>
      <van-tab name="follower">
        <template #title>
          <van-icon name="smile-o" style="margin-right: 2px"/>
          粉丝
        </template>
      </van-tab>
      <van-tab name="mutual">
        <template #title>
          <van-icon name="friends-o" style="margin-right: 2px"/>
          互相关注
        </template>
      </van-tab>
    </van-tabs>
    <div style="margin-top: 10px;">
      <van-cell
          v-for="follow in followList"
          :key="follow?.user?.id"
          :title="`姓名: ${follow?.user?.username}`"
          :label="`关注时间: ${formatTime(follow?.followTime)}`"
          is-link
          @click="doToShowInfo(follow?.user?.id)"
          style="margin-top: 4px; margin-bottom: 4px; "
      >
        <!-- 左侧头像 -->
        <template #icon>
          <img
              :src="follow?.user?.avatarUrl"
              class="user-avatar"
              style="width: 40px; height: 40px; border-radius: 50%; margin: 0 16px 0 8px;"
              alt="用户头像"
          />
        </template>
      </van-cell>
    </div>
  </div>
</template>

<script setup lang="ts">
import type {UserType} from "../../models/User";
import {onMounted} from "vue";
import {getCurrentUser} from "../../sevices/User.ts";
import {ref} from 'vue'
import {getFollowList} from "../../api/Follow.ts";
import type {FollowedUserItem, FollowType} from "../../models/Follow";
import {useRouter} from "vue-router";


const router = useRouter();

const user = ref<UserType>();
const followUserList = ref<FollowType>()
const DEFAULT_STATUS = 'follow';
const active = ref(DEFAULT_STATUS);

// 定义变化的用户列表
const followList = ref<FollowedUserItem[]>([]);


// 钩子函数
onMounted(async () => {
  user.value = await getCurrentUser();
  // 获取关注列表
  const result = await getFollowList();
  // @ts-ignore
  if (result.code === 0 && result.data) {
    followUserList.value = result.data;
    followList.value = result?.data?.userList || [];
  }
})

// 监听标签的变化
const doTagsChange = (name: string) => {
  if (followUserList.value == null) {
    return;
  }
  if (name === 'follow') {
    followList.value = followUserList.value?.userList || [];
  } else if (name === 'follower') {
    followList.value = followUserList.value?.followedUserList || [];
  } else if (name === 'mutual') {
    followList.value = followUserList.value?.mutualUserList || [];
  }
}

// 用户卡片
// 跳转到用户详细信息页
const doToShowInfo = (userId: number) => {
  router.push({
    path: '/user/showInfo',
    query: {
      userId: userId,
    },
  })
};

/**
 * 时间格式化函数：将 ISO 时间（如 2025-07-08T15:41:35）转换为 yyyy-MM-dd
 * @param time 原始时间字符串（支持 ISO 格式或时间戳）
 * @returns 格式化后的日期字符串，无效时间返回 null
 */
const formatTime = (time: string | undefined): string | null => {
  if (!time) return null; // 时间为空直接返回null
  try {
    const date = new Date(time); // 解析时间字符串
    // 获取年、月、日（月份从0开始，需+1）
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0'); // 补0确保两位数
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
  } catch (err) {
    console.error('时间格式化失败', err);
    return null; // 解析失败返回null
  }
};

</script>

<style scoped>
.recommend-page {
  padding: 0 6px;
}

.top-card {
  background-color: #E7FAFB;
}

.stats-container {
  display: flex;
  justify-content: space-around;
  margin-top: 16px;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 18px;
  font-weight: bold;
}

.stat-label {
  font-size: 12px;
}

.card-title {
  font-size: 28px;
  font-weight: bold;
  margin: 4px;
}

.van-cell {
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

</style>